<template>
  <div class="main">
    <MainTopMenuPanel :activePanel="activePanel" ></MainTopMenuPanel>

    <!-- 底部视频播放    -->
    <div ref="foot-div" class="foot-div" :style="footBoxStyle">
      <div class="bottom-player"  :class="footActive === true ? 'hight180' : 'hight0'">
        <div class="foot-play-frame">
          <div class="box_site5">
<!--
            <div v-for="item in playerPanels" class="div_site5" :ref="item.ref"  :style="item.style"
                 @click="playerBoxClick(item.id)" @mouseover="boxMouseOver(item.id)" @mouseleave="boxMouseLeave(item.id)">
              <CommPlayer :ref="item.playerRef" :scale="scale" :customStyle="playerBgStyle"></CommPlayer>
            </div>
            -->
          </div>
        </div>
      </div>
    </div>
    <!-- 底部按钮   -->
    <div class="foot-btn-div">
      <div class="foot-button" :class="footActive === true ? 'bottom180' : 'bottom0'" @click="footBtnClick">
        <i ><Icon type="ios-arrow-up" /></i>
      </div>
    </div>
    <!--  右边抽屉  -->
    <div ref="rightDiv" class="right-div" :style="rightBoxStyle">
      <div class="right_drawer" ></div>
    </div>

    <!--  左边抽屉  -->
    <div class="left-div" :style="leftBoxStyle">
      <div class="drawer-box" :class="leftActive === true ? 'width300' : 'width300'">
        <GbDevicetree1 ref="gbDeviceTree1"
                       @device-refresh="deviceRefresh"
                       @chn-node-click="chnClick"
                       @org-node-click="orgClick"
                       @dev-node-click="devClick"
                       @on-offline-click="chnOfflineClick"
                       @on-playbtnclick="playBtnClick"
                       @on-select-change="selectChange"></GbDevicetree1>
      </div>
      <div class="left-box">
        <div class="button" @click="leftBtnClick">
          <i><Icon type="ios-arrow-forward" /></i>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import MainTopMenuPanel from "@/view/Home/component/MainTopMenuPanel";
import GbDevicetree1 from "_c/topnav/GbDeviceTree1";
export  default {
  components: {MainTopMenuPanel,GbDevicetree1},
  watch: {
    footActive(oldValue, newValue) {
      this.footRightBoxCloseOrOpen();
    },
  },
  data() {
    return {
      activePanel:1,
      footBoxStyle:{left:"300px",bottom:"0px"},
      rightBoxStyle:{bottom: '180px',right:'-400px'},
      leftBoxStyle:{bottom: '0px',left:"0px"},
      footActive:true,
    }
  },
  methods:{
    footBtnClick(){
      this.footActive = !this.footActive;
      if (this.footActive){
        this.rightBoxStyle.bottom='180px';
        this.tagBoxStyle.bottom='180px';
        //this.leftBoxStyle.bottom='180px';

      }else {
        this.rightBoxStyle.bottom='0';
        this.tagBoxStyle.bottom='10px';
        //this.leftBoxStyle.bottom='0';

      }
    },
    rightBoxbtnClick(e){
      this.rightActive=!this.rightActive;
    },

    /**
     * 当在设备树搜索和选择时
     * 设备数据刷新
     * @param data
     */
    deviceRefresh(data){
      //刷新汇聚数据
      this.devDatas1=[];
      //this.recursiveDevices(data);
      //this.$refs.mapframe.refreshCluser(40,20,this.devDatas1)
    },
    chnClick(event,node, data){
      ;
    },
    orgClick(node, data){
      console.log("orgClick-node:%o",node);
      console.log("orgClick-data:%o",data);
    },
    devClick(node, data){

    },
    chnOfflineClick(node, data){

    },
    playBtnClick(node, data){

    },
    selectChange(node, data){

    },
  }
}
</script>
<style lang="less">
  .main{
    position:relative;
    width: 100%;
    height: 100%;
  };
  /** 底固定栏 */
  .foot-div{
    z-index: 91;
    position: absolute;
    right: 0px;
    .bottom-player{
      width: 100%;
      bottom: 0;
      //height: 180px;
      background-color: #ffffff;
      z-index: 99;

      .foot-play-frame{
        width:100%;
        height:100%;
        .box_site5 {
          width:100%;
          height:100%;
          background-color: #000;
          display: flex;
          flex-wrap: wrap;

          /*      .div_main5 {
                  width: calc(100% / 2);
                  height: calc(100% / 2);
                  border: 1px solid #14edc5;
                  box-sizing: border-box;

                }*/
          .div_site5 {
            width: calc(100% / 5);
            height: 100%;//calc(100% / 2);
            border: 1px solid #0c0c0c;
            box-sizing: border-box;
          }
        }
      }
    };
    .hight180{
      height: 180px;
    };
    .hight0{
      height: 0px;
    };

  };

  /** 底部按钮 */
  .foot-btn-div {
    .foot-button {
      position: absolute;
      /*    height: 100%;
          position: relative;*/

      width: 60px;
      height: 24px;
      left:50%;
      //bottom:0;
      background: #7cc3fd;
      -webkit-box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
      box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
      text-align: center;
      line-height: 35px;
      vertical-align: top;
      margin-top: 11px;
      border: 1px solid #e5e3dd;
      border-bottom: none;

      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      cursor: pointer;
      i{
        font-size: .2rem;
        color: #fff;
      }
    };
    .bottom180{
      bottom:180px;
    }
    .bottom0{
      bottom:0;
    }
  };

  /*右弹框*/
  .right-div {
    top:70px;

    //height: 100%;
    bottom: 0;
    position: fixed;
    right: 0;
    z-index: 100;
    //background-color: #2d8cf0;

    .width453 {
      width: 453px;
    }
    .width0{
      width: 0px;
    }
    .right_drawer {
      width:400px;
      height: 100%;
      background: #f1f7ff;
      float: right;
      -webkit-transition: width .3s;
      transition: width .3s;
      border: 1px solid #14edc5;
      border-top-left-radius: 7px;
    }
    .rightbox{
      float: right;
      height: 100%;
      position: relative;
      top:100px;

      .button {
        width: 37px;
        height: 37px;
        background: #7cc3fd;
        -webkit-box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
        box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
        text-align: center;
        line-height: 35px;
        vertical-align: top;
        margin-top: 11px;
        border: 1px solid #e5e3dd;
        border-right: none;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        cursor: pointer;
        i{
          font-size: .2rem;
          color: #fff;
        }
      }
    }
  }
  /*左抽屉 */
  .left-div {
    top:100px;
    bottom:0;
    //height: 100%;
    position: fixed;
    left: 0;
    z-index: 90;

    //background-color: #2d8cf0;

    .width300 {
      width: 300px;
    }
    .width0{
      width: 0px;
    }
    .drawer-box {
      height: 100%;
      background: #f1f7ff;
      float: left;
      -webkit-transition: width .3s;
      transition: width .3s;
      border: 1px solid #14edc5;
      border-top-right-radius: 5px;
    }
    /* 按钮 */
    .left-box {
      float: left;
      height: 100%;
      position: relative;
      top: 100px;

      .button {
        width: 37px;
        height: 37px;
        background: #7cc3fd;
        -webkit-box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
        box-shadow: -1px -1px 5px 1px rgba(0, 0, 0,0.2);
        text-align: center;
        line-height: 35px;
        vertical-align: top;
        margin-top: 11px;
        border: 1px solid #e5e3dd;
        border-left: none;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        cursor: pointer;
        i{
          font-size: .2rem;
          color: #fff;
        }
      }
    }
  }
</style>
